<script setup lang="ts">
import Dialog from '@/components/Dialog.vue'
import { 
	FORMAT_JSON_FOR_NOTES, 
} from '@/common/hooks'
import type { DialogConfigType  } from '@/components/dialogType'
import type { FormType } from '@/components/formTemplateType'

const formData: FormType = ref({})
const dialogRef = ref<InstanceType<typeof Dialog>>()
const exposeOpenDialogViewFn = (dialogConfig: DialogConfigType ) => {
    dialogRef.value?.exposeOpenDialogCommonFn(dialogConfig)
	formData.value = dialogConfig.row
}

// 暴露给父组件
defineExpose({
    exposeOpenDialogViewFn
})
</script>

<template>
	<Dialog ref="dialogRef">
		<el-form :model="formData" label-width="100px">
			<el-form-item v-for="(v, k) in formData" :key="k" :label="k">
				<el-input 
					v-if="k === 'value'" 
					:value="FORMAT_JSON_FOR_NOTES(v)" 
					type="textarea" 
					:rows="10" 
					readonly 
				/>
				<el-input 
					v-else 
					:value="v" 
					readonly 
				/>
			</el-form-item>
		</el-form>
	</Dialog>
</template>

<style lang="scss" scoped>
:deep(.el-form) {
	label.el-form-item__label {
		display: inline-block;
		text-indent: 0;
		text-align: right;
	}
	.el-form-item__content {
		padding-right: .7rem !important;
	}
	textarea {
		margin-bottom: .2rem;
		height: 2rem;
	}
}
</style>